<template>
  <div class="app-container xjAdd">
    
    <el-card class="margin-bottom-15">
      <el-descriptions title="设备基本信息" :column="3" border>
        <el-descriptions-item label="设备序列号">
          {{ detailInfo.sn }}
        </el-descriptions-item>
        <el-descriptions-item label="设备名称">
          {{ detailInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item label="从机号">
          {{ detailInfo.slaveId }}
        </el-descriptions-item>
        <el-descriptions-item label="设备类型">
          <template :slot-scope="detailInfo">
            <dict-tag :options="dict.type.device_type" :value="detailInfo.type"/>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="所属街道id">
          {{ detailInfo.deptName }}
        </el-descriptions-item>
        <el-descriptions-item label="通讯间隔">
          {{ detailInfo.timeSpace }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ detailInfo.bz }}
        </el-descriptions-item>
      </el-descriptions>
      <div id="container"></div>
    </el-card>
      
    <el-card class="margin-bottom-15">
      <el-descriptions title="设备数据" :column="3" border></el-descriptions>   
    </el-card>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { listDeviceInfo, getDeviceInfo, delDeviceInfo, addDeviceInfo, updateDeviceInfo } from "@/api/wrj/deviceInfo";

export default {
  name: 'add',
  dicts: ['device_type'],
  // dicts: ['ptsj_score_plus', 'ptsj_score_redution', 'ptsj_red_card_item', 'ptsj_yellow_card_item', 'ptsj_blue_card_item'],
  data() {
    return {
      detailInfo: {
        lat:'',
        lng:'',
      },
      id:'',

      
    }
  },
  created() {
    if(this.$route.query.id){
      this.id = this.$route.query.id
    }
    
  },
  mounted(){
    this.$nextTick(()=>{
        this.initAMap();
        
    })
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    // 获取详情信息
    getDeviceInfo(id){
      getDeviceInfo(id).then(res=>{
        this.detailInfo = res.data;
        let lng = this.detailInfo.lng;
        let lat = this.detailInfo.lat;
        console.log(lng)
        var marker = new AMap.Marker({
              icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
              position: [lng, lat],
              offset: new AMap.Pixel(-13, -30),
            });
            this.map.add(marker);
            this.map.setFitView(marker)
      })
    },
    // 地图初始化
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "ea203d3756bb886bcdd4833c10c332b9",
      };
      AMapLoader.load({
        key: "475db83acfc1af0cbab24fbdaa34072c", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          let that = this;
          this.defaultLayer = new AMap.createDefaultLayer()
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [120.577490, 29.932739], // 初始化地图中心点位置
          });
          this.getDeviceInfo(this.id);
        })
        .catch((e) => {
          console.log(e);
        });
        
    },
  }
}
</script>

<style lang="scss" scoped>
.margin-bottom-15 {
  margin-bottom: 10px;
  // margin-bottom: 50px;
}
</style>

<style>
#container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 30vh;
    }
.amap-icon img {
        width: 25px;
        height: 34px;
    }
</style>
